<template>
  <li :class="listLeve">
    <div class="leve-title">
      <span v-if="this.catalogs.paragraph||catalogLevel">&gt;&nbsp;&nbsp;</span>
      <span>{{catalogs.title}}</span>
    </div>
    <ul class="components">
      <li @click="parentFun(components)"
          :class="{active:componentDefaulf==components.id}"
          v-for="components in catalog().components"
          :key="components.id">
        <span class="mark"></span>
        <i class="iconfont tick icon-wancheng-"></i>
        <span class="component-title">{{components.title}}</span>
        <!--<div class="itemCount"><span>{{components.itemCount}}项数据&nbsp;&nbsp;&nbsp;</span><Icon type="chevron-right"></Icon></div>-->
      </li>
    </ul>
    <ul class="catalogs" v-if="isFolder">
      <EditorNav v-for="item in catalogs.catalogs"
                 :componentDefaulf="activeId"
                 :key="item.id"
                 :catalogs="item"></EditorNav>
    </ul>
  </li>
</template>

<script>

  export default {
    name      : 'EditorNav',
    data() {
      return {}
    },
    props     : ['catalogs', 'componentDefaulf'],
    components: {},
    computed  : {
      listLeve() {
        let catalogLevel = this.catalogs.catalogLevel,
            style        = ''
        if (catalogLevel !== 'undefined') {
          if (this.catalogs.paragraph) {
            catalogLevel++;
          }
          style = 'list-' + catalogLevel
        }
        return style
      },
      catalogLevel() {
        let catalogLevel = this.catalogs.catalogLevel
        return catalogLevel !== 'undefined' && catalogLevel > 0
      },

      isFolder() {
        return this.catalogs.catalogs && this.catalogs.catalogs.length
      },

    },
    methods   : {
      catalog() {
        return this.catalogs || []
      },
      parentFun(value) {
        let url = `/component`;
        this.$store.commit('resetComponentHistory', url)
        this.$emit('parentFun', value)
      }
    },
    created() {
    }
  }
</script>
